<template>
  <Page class="bg-[#f5f5f5] min-h-screen">
    <PageHeader title="课程详情" />
    <view class="h-[120rpx]"></view>
    <!-- 课程封面
    <view class="w-full h-[240rpx] overflow-hidden rounded-2xl mt-[-32rpx] mb-[24rpx] mx-auto bg-[#e6eaf2] flex items-center justify-center">
      <image :src="course.cover" mode="aspectFill" class="w-full h-full object-cover block" :style="{ minHeight: '100%' }" />
    </view>-->
    <!-- 课程信息卡片 -->
    <view class="bg-white rounded-2xl shadow-md p-[32rpx] mx-[24rpx] mb-[24rpx] relative z-10">
      <view class="text-[36rpx] font-bold mb-[16rpx] text-[#222]">{{ courseDetail.title }}</view>
      <view class="flex gap-x-8 mb-[16rpx]">
        <view class="text-[#666] text-[26rpx]">{{ courseDetail.member_number}}人学习</view>
        <view class="text-[#666] text-[26rpx]">{{  }}课时</view>
        <!-- <view class="text-[#666] text-[26rpx]">{{ course.rating }}分</view> -->
      </view>
      <view class="text-[#FF4D4F] text-[36rpx] font-bold mb-[16rpx]">¥{{ courseDetail.price }}</view>
      <view class="flex items-center mb-[8rpx]">
        <image :src="getFullPath(courseDetail.teachers_pic)" class="w-[40rpx] h-[40rpx] rounded-full mr-[12rpx] object-cover bg-[#e6eaf2]" @error="onAvatarError" />
        <view class="text-[28rpx] text-[#333]">{{ courseDetail.teacher_name }}</view>
      </view>
    </view>
    <!-- 简介区块 -->
    <view class="text-[30rpx] font-bold px-[32rpx] py-[20rpx] bg-[#f9f9f9] mt-[8rpx]">课程简介</view>
    <view class="bg-white px-[32rpx] py-[24rpx] text-[28rpx] leading-[1.7] text-[#333]">{{ courseDetail.teachers_introduction }}</view>
    <!-- 目录区块 -->
    <view class="text-[30rpx] font-bold px-[32rpx] py-[20rpx] bg-[#f9f9f9] mt-[8rpx]">课程目录</view>
    <view class="bg-white mb-[120rpx]">
      <view v-for="(chapter, idx) in lessons" :key="chapter.id" class="px-[32rpx] py-[24rpx] border-b border-[#eee] flex items-center">
        <view class="flex-1 text-[28rpx]">{{ chapter.title }}
          <!--<span v-if="chapter.locked" class="ml-[8rpx] text-[#FFB300] align-middle">🔒</span>-->
        </view>
        <view class="text-[24rpx] mt-[2rpx]">{{  }}课时 · {{ chapter.duration }}</view>
      </view>
    </view>
    <!-- 底部吸顶购买栏 -->
    <view class="fixed bottom-0 left-0 right-0 w-full max-w-[750rpx] mx-auto box-border bg-white px-[32rpx] py-[20rpx] shadow-[0_-2rpx_8rpx_rgba(0,0,0,0.06)] flex items-center justify-between z-[999] border-t border-[#eee]">
      <view class="flex-1">
        <span class="text-[26rpx] text-[#999] line-through mr-[12rpx]">¥{{ course.originalPrice }}</span>
        <span class="text-[#FF4D4F] text-[36rpx] font-bold">¥{{ courseDetail.price }}</span>
      </view>
      <nut-button type="primary" class="rounded-2xl text-[30rpx] px-[48rpx] bg-[#165DFF] font-bold" @click="purchaseCourse">立即购买</nut-button>
    </view>
  </Page>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import {getCurrentInstance} from "@tarojs/runtime";
import {getFullPath, post} from "@/utils/request";

/**
 * 课程详情页面
 * @description 课程信息、简介、目录、底部购买栏，严格按设计稿和Cursor规则实现。
 * @performance 只渲染必要内容，mock数据，移动端适配。
 */
//获取主课程信息的数据格式
interface CourseColumn {
  member_id:null,
  teachers_pic:null,
  sign_rate:null,
  teacher_name:null,
  member_number:null,
  teachers_introduction:null,
  create_time: number,
  pay_number:null,
  title:null,
  type:null,
  cycle_type:null,
  cycle:null,
  cover:null,
  update_time: null | number;
  pay_status:null,
  total_amount:null,
  price:null,
  progress:null,
  id: number,
  introduction:null,
  status:number
}
//获取相关章节的数据格式
interface LessonsColumn {
  duration:number,
  update_time:number,
  date_time:string,
  create_time:number,
  id:number,
  status:number
  title: string,
  videoUrl: string,
  trainingId:number
}

interface CourseItem {
  columns: CourseColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}

interface  LessonsItem{
  columns: LessonsColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}
//定义详情页展示信息
const courseDetail = ref(
    {
      member_id: null,
      teachers_pic: null,
      sign_rate: null,
      teacher_name: null,
      member_number: null,
      teachers_introduction: null,
      create_time: null,
      pay_number: null,
      title: null,
      type: null,
      cycle_type: null,
      cycle: null,
      cover: null,
      update_time: null,
      pay_status: null,
      total_amount: null,
      price: null,
      progress: null,
      id: null,
      introduction: null,
      status: null
    }
)
//接收主课程数据
const courseDetailData = ref([])
//接收章节数据
const lessons = ref([])
const goBack = () => {
  Taro.navigateBack()
}

const course = ref({
  cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', // 可访问的课程封面图片
  title: 'HTML5与CSS3基础教程',
  students: 128,
  lessons: 20,
  rating: 4.9,
  price: 99,
  originalPrice: 199,
  teacher: {
    name: '张老师',
    avatar: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg' // 可访问的讲师头像
  },
  description:
    '本课程从零开始讲解HTML5和CSS3的基础知识，包括HTML5新标签、语义化结构、CSS3选择器、盒模型、Flex布局、响应式设计等核心内容。通过大量实例演示，帮助学员快速掌握现代网页开发基础技术。'
})

const chapters = ref([
  { id: 1, title: '第1章：HTML5基础', lessons: 4, duration: '120分钟', locked: false },
  { id: 2, title: '第2章：CSS3基础', lessons: 5, duration: '150分钟', locked: false },
  { id: 3, title: '第3章：Flex布局', lessons: 3, duration: '90分钟', locked: true },
  { id: 4, title: '第4章：响应式设计', lessons: 4, duration: '120分钟', locked: true }
])
/**获取主课程ID的课程详情信息*/
getCourseInformation()
function getCourseInformation(){
  const courseId = getCurrentInstance()
  const id = courseId.router?.params.id as string||""
  const submitData = {
    id: id
  }
  //TODO：课程简介和目录在增加时都没有存入
  post('/training/getById',submitData).then(res=>{
    courseDetailData.value = res.data.map((item:CourseItem)=>({
          member_id:item.columns.member_id,
          teachers_pic:item.columns.teachers_pic,
          sign_rate:item.columns.sign_rate,
          teacher_name:item.columns.teacher_name,
          member_number:item.columns.member_number,
          teachers_introduction:item.columns.teachers_introduction,
          create_time: item.columns.create_time,
          pay_number:item.columns.pay_number,
          title:item.columns.title,
          type:item.columns.type,
          cycle_type:item.columns.cycle_type,
          cycle:item.columns.cycle,
          cover:item.columns.cover,
          update_time: item.columns.update_time,
          pay_status: item.columns.pay_status,
          total_amount:item.columns.total_amount,
          price:item.columns.price,
          progress:item.columns.progress,
          id: item.columns.id,
          introduction:item.columns.introduction,
          status:item.columns.status
        }
    ))
    courseDetail.value = courseDetailData.value[0]
    //console.log("courseDetail",courseDetail.value)
    //查询成功则继续查询章节信息
    if(res.code===0){
      const submitId = {
        trainingId:courseDetail.value.id
      }
      post('/training/list',submitId).then(res=>{
        lessons.value = res.data.map((item:LessonsItem)=>({
              duration:item.columns.duration,
              update_time:item.columns.update_time,
              date_time:item.columns.date_time,
              create_time:item.columns.create_time,
              id:item.columns.id,
              status:item.columns.status,
              title: item.columns.title,
              videoUrl: item.columns.videoUrl,
              trainingId:item.columns.trainingId
        }
        ))
        /*if(res.code===0){
          Taro.showToast({ title: '查询成功', icon: 'success',duration: 2000 })
        }
        else{
          Taro.showToast({ title: '查询失败', icon: 'success',duration: 2000 })
        }*/
      })
    }
  })
}


function purchaseCourse() {
  //Taro.showToast({ title: '即将跳转到支付页面', icon: 'success',duration: 2000 })
  const submit = {
    trainingId:courseDetail.value.id
  }
  post('/training/buy',submit).then(res=>{
    //请求成功则展示结果
    if(res.code===0){
      Taro.showToast({ title: '购买成功', icon: 'success',duration: 2000 })
    }
  })
}

function onAvatarError(e: any) {
  course.value.teacher.avatar = 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg'
}
</script>

<style scoped lang="scss">

</style>